<template>
	<div class="order-detail">
		<header class="header container layout-around flex-column pt15 pb15">
			<template v-if="status == 0">
				<h3 class="white fs24">等待付款</h3>
				<p class="white fs12">{{ hour }}小时{{ minute }}分{{ second }}秒后自动关闭</p>
			</template>
			<template v-if="status == 1">
				<h3 class="white fs24">待发货</h3>
				<p class="white fs12">您的宝贝正整装待发~</p>
			</template>
			<template v-if="status == 2">
				<h3 class="white fs24">已发货</h3>
				<p class="white fs12">快递已在路上~</p>
			</template>
			<template v-if="status == 3">
				<h3 class="white fs24">订单已完成</h3>
			</template>
		</header>
		<section class="address border-b20 layout pt15 pb15 container" v-if="data">
			<img style="width: 2rem;" src="../../../assets/icon22.png" alt="">
			<div class="flex_1 ml10">
				<p class="fs14 black"><strong class="mr15">{{ data.receiver_name }}</strong>{{ data.receiver_mobile }}</p>
				<p class="fs12 black">{{ data.all_name }}</p>
			</div>
			<van-icon class="black" color="#000" size="20px" name="youjiantou"/>
		</section>
		<section class="container border-b20">
			<div class="pt20 pb20 layout-juscon" v-for="item in data.order_item">
				<img class="mr15 responsive-img img-bg" :src="item.goods_picture" alt="" style="width:100px;height:85px;">
				<div class="flex_1">
					<p class="fs16 black ellipsis" style="width: 15rem">{{ item.goods_name }}</p>
					<p class="c999 fs12 mt5">规格：{{ item.sku_name }}<span class="ml20">数量:{{ item.num }}</span></p>
					<p class="subject fs16 mt10"><i class="fs14">￥</i>{{ item.price }}</p>
				</div>
			</div>
		</section>
		<section class="container border-b20">
			<ul class="border-b pt pt5 pb5">
				<li class="pt5 pb5 layout fs12">
					<p>优惠券</p>
					<span class="subject">-20.99</span>
				</li>
				<li class="pt5 pb5 layout fs12">
					<p>运费</p>
					<span>15</span>
				</li>
				<li class="pt5 pb5 layout fs12" v-if="data.int_type == 1">
					<p>发票</p>
					<span>个人发票</span>
				</li>
			</ul>
			<h3 class="align-right pt15 pb15 subject fs14">合计：￥<i class="fs16 bold">{{ data.order_money }}</i></h3>
		</section>
		<section class="container" v-if="data">
			<ul class="pt5 pb5">
				<li class="fs12 black pt5 pb5">订单编号：{{ data.order_no }}</li>
				<li class="fs12 black pt5 pb5" v-if="data.payment_type == 0">交易方式：支付宝支付</li>
				<li class="fs12 black pt5 pb5">下单时间：{{ data.created_at }}</li>
				<li class="fs12 black pt5 pb5">买家留言：{{ data.buyer_message }}</li>
			</ul>
		</section>
		<footer class='footer pos-fix bottom0 full-width container pt10 pb10 align-right'>
			<template v-if="status == 0">
				<button class="border pt5 pb5 pl10 pr10 c666 radius fs14 border-c666">取消订单</button>
				<button class="border pt5 pb5 pl10 pr10 white radius fs14 bg-subject border-tm">立即支付</button>
			</template>
			<template v-if="status == 1">
				<button class="border pt5 pb5 pl10 pr10 white radius fs14 bg-subject border-tm">取消预订</button>
				<button class="border pt5 pb5 pl10 pr10 white radius fs14 bg-subject border-tm">項目进度</button>
			</template>
			<template v-if="status == 2">
				<button class="border pt5 pb5 pl10 pr10 c666 radius fs14 border-c666">查看物流</button>
				<button class="border pt5 pb5 pl10 pr10 white radius fs14 bg-subject border-tm">确认收货</button>
			</template>
			<template v-if="status == 3">
				<button class="border pt5 pb5 pl10 pr10 c666 radius fs14 border-c666">申请售后</button>
				<button class="border pt5 pb5 pl10 pr10 white radius fs14 bg-subject border-tm">售后详情</button>
			</template>
		</footer>
	</div>
</template>

<script>
	export default{
		data()
		{
			return{
				status 		: this.$route.query.status,
				data    	: [],
				section  	: 0
			}
		},
		computed: {
			hour()
			{
				return Math.floor(this.section % 86400 / 3600) < 10 ? '0' + Math.floor(this.section % 86400 / 3600) : Math.floor(this.section % 86400 / 3600);
			},
			minute()
			{
				 return Math.floor(this.section % 3600 / 60) < 10 ? '0' + Math.floor(this.section % 3600 / 60) : Math.floor(this.section % 3600 / 60);
			},
			second()
			{
				return Math.floor(this.section % 60) < 10 ? '0' +  Math.floor(this.section % 60) :  Math.floor(this.section % 60);
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/order/details',{ params : { id : this.$route.query.order_id }}).then( res => {
					this.data = res.data;
					this.section = res.data.re_time;
					this.countdown();
				})
			},
			countdown()
			{
				var itv = setInterval(() => {
					if (this.section > 0)
						--this.section;
					else
						clearInterval(itv);
				}, 1000);
			}
		}
	}
</script>

<style lang="less">
	.order-detail{
		.header{
			height: 125px;
			background-image: url(../../../assets/banner-bg3.png);
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
</style>
